<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      append-to-body
      :custom-class="'panna-dialog_medium'"
      title="分配检测任务"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <el-form ref="formData" :model="formData" status-icon :rules="formRules">
        <el-form-item
          label="检测人"
          :label-width="formLabelWidth"
          prop="detectionPeopleLabelList"
        >
          <el-input
            v-model="formData.detectionPeopleLabelList"
            disabled
          ></el-input>
          <div class="selectProductStandard" @click="selectUser">+</div>

          <!-- <el-select v-model="formData.detectionPersonId" placeholder="检测人">
            <el-option
              v-for="item in userArrary"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item
          label="任务编码"
          :label-width="formLabelWidth"
          prop="entrustTaskNum"
        >
          <el-input
            v-model="formData.entrustTaskNum"
            placeholder="任务编码"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="计划检测时间"
          :label-width="formLabelWidth"
          prop="planDetectionDate"
        >
          <el-date-picker
            v-model="formData.planDetectionDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="formData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-table
        :data="
          data.slice(
            (pagination.pageIndex - 1) * pagination.pageSize,
            (pagination.pageIndex - 1) * pagination.pageSize +
              pagination.pageSize
          )
        "
        height="calc(100% - 200px)"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="委托单号">
          <template slot-scope="scope">{{ scope.row.orderNum }}</template>
        </el-table-column>
        <el-table-column label="检测项目">
          <template slot-scope="scope">{{
            scope.row.detectionItemName
          }}</template>
        </el-table-column>
        <el-table-column label="样品名称">
          <template slot-scope="scope">{{ scope.row.sampleName }}</template>
        </el-table-column>
        <el-table-column label="样品编号">
          <template slot-scope="scope">{{ scope.row.sampleNum }}</template>
        </el-table-column>
      </el-table>
      <BasePagination
        :total="pagination.total"
        :page-index="pagination.pageIndex"
        :page-size="pagination.pageSize"
        @sizeChange="sizeChange"
        @changePage="currentChange"
      />
      <div slot="footer" class="dialog-footer" align="center">
        <el-button :disabled="!submitLoad" type="primary" @click="onSubmit()"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>

      <ChoiceUserDialog
        v-if="userDialogFormVisible"
        :dialog-form-visible.sync="userDialogFormVisible"
        :detection-people-id-list.sync="formData.detectionPeopleList"
        @choiceUser="choiceUser"
      />
    </el-dialog>
  </div>
</template>
<script>
// 节流
// import debounce from "lodash/debounce";
import { formatTime } from "../../../utils/time";
import { getUserListNoPage } from "../../../api/Permission/PermissionUser";
import {
  entrustTaskUpdateDistribution,
  GetTaskNumber,
} from "../../../api/EntrustTaskManage/EntrustTask";
import ChoiceUserDialog from "../../../../ModulePermission/components/Permission/ChoiceUserDialog.vue";

import _ from "lodash";
export default {
  name: "EntrustTaskDistribution",
  components: {
    ChoiceUserDialog,
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array, // 数组 // 对象或数组默认值必须从一个工厂函数获取
      default: () => [],
    },
  },
  data() {
    return {
      userDialogFormVisible: false,
      submitLoad: true,
      // 表单验证
      userArrary: [],
      tableDatas: [],
      formRules: {
        detectionPeopleLabelList: [
          { required: true, message: "检测人不能为空" },
        ],
        planDetectionDate: [
          { required: true, message: "计划检测时间不能为空" },
        ],
      },
      innerDialogFormVisible: false,
      formLabelWidth: "150px",
      loading: false,
      formData: {
        // 检测人id集合
        detectionPeopleList: [],
        detectionPersonId: 0,
        planDetectionDate: formatTime(new Date()),
        remark: "",
        entrustTaskUpdateDistributionRequestData: [],
        entrustTaskNum: "",
        numChangeState: true,
        // 选择的检测人名称
        detectionPeopleLabelList: "",
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      taskNum: "",
    };
  },
  watch: {},

  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.getUserListNoPageFun();
    this.formData.entrustTaskUpdateDistributionRequestData = this.data;
    this.pagination.total = this.data.length;
    GetTaskNumber()
      .then((res) => {
        this.taskNum = res.data;
        this.formData.entrustTaskNum = res.data;
      })
      .catch(() => {});
  },
  methods: {
    selectUser() {
      this.userDialogFormVisible = true;
    },
    // 选择人员的弹框关闭
    choiceUser(data) {
      if (data !== null && data.length !== 0) {
        this.formData.detectionPeopleLabelList = "";
        this.formData.detectionPeopleList = [];
        for (let i = 0; i < data.length; i++) {
          this.formData.detectionPeopleLabelList += data[i].name + ",";
          this.formData.detectionPeopleList.push(data[i].id);
        }
        this.formData.detectionPeopleLabelList =
          this.formData.detectionPeopleLabelList.substring(
            0,
            this.formData.detectionPeopleLabelList.length - 1
          );
      }
    },
    entrustTaskUpdateDistributionFun() {
      this.formData.NumChangeState =
        this.taskNum === this.formData.entrustTaskNum;
      entrustTaskUpdateDistribution(this.formData)
        .then((res) => {
          if (res.code === 200) {
            this.$emit("getList");
            this.$emit("update:dialogFormVisible", false);
            this.submitLoad = true;
          } else {
            this.submitLoad = true;
          }
        })
        .catch((res) => {
          this.submitLoad = true;
        });
    },
    getUserListNoPageFun() {
      var pars = {};
      this.userArrary = [];
      getUserListNoPage(pars)
        .then((res) => {
          this.userArrary = res.data;
        })
        .catch((res) => {});
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.innerDialogFormVisible = false;
      this.$refs.formData.resetFields();
      this.$emit("getList");
      this.$emit("update:dialogFormVisible", false);
    },
    onSubmit: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        if (
          this.formData.detectionPeopleList === null ||
        this.formData.detectionPeopleList.length === 0
        ) {
          this.$message("检测人必须填写");
          this.submitLoad = true;
          return false;
        }
        // if (this.formData.planDetectionDate === "") {
        //   this.$message("计划检测时间必须填写");
        //   this.submitLoad = false;
        //   return false;
        // }
        this.entrustTaskUpdateDistributionFun();
      }
    }, 3000),
  },
};
</script>
<style scoped>
.selectProductStandard {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
